<li
  #dragElement
  role="treeitem"
  [style.display]="displayStyle"
  [ngClass]="apesNodeClass">
  <ng-container *ngIf="apesShowExpand">
    <span
      [ngClass]="apesNodeSwitcherClass"
      (click)="_clickExpand($event)">
      <ng-container *ngIf="isShowSwitchIcon">
        <ng-container *ngIf="!apesTreeNode.isLoading">
          <ng-template
            *ngIf="isTemplateRef(apesExpandedIcon)"
            [ngTemplateOutlet]="apesExpandedIcon"
            [ngTemplateOutletContext]="{ $implicit: apesTreeNode }">
          </ng-template>
          <i
            *ngIf="!isTemplateRef(apesExpandedIcon)"
            apes-icon
            type="caret-down"
            [class.apes-select-switcher-icon]="apesSelectMode"
            [class.apes-tree-switcher-icon]="!apesSelectMode">
          </i>
        </ng-container>
        <i *ngIf="apesTreeNode.isLoading" apes-icon apesType="loading" [spin]="true" class="apes-tree-switcher-loading-icon"></i>
      </ng-container>
      <ng-container *ngIf="apesShowLine">
        <ng-template
          *ngIf="isTemplateRef(apesExpandedIcon)"
          [ngTemplateOutlet]="apesExpandedIcon"
          [ngTemplateOutletContext]="{ $implicit: apesTreeNode }">
        </ng-template>
        <ng-container *ngIf="!isTemplateRef(apesExpandedIcon)">
          <i *ngIf="isShowLineIcon" apes-icon [apesType]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="apes-tree-switcher-line-icon"></i>
          <i *ngIf="!isShowLineIcon" apes-icon apesType="file" class="apes-tree-switcher-line-icon"></i>
        </ng-container>
      </ng-container>
    </span>
  </ng-container>
  <ng-container *ngIf="apesCheckable">
    <span
      [ngClass]="apesNodeCheckboxClass"
      (click)="_clickCheckBox($event)">
      <span [class.apes-tree-checkbox-inner]="!apesSelectMode"
            [class.apes-select-tree-checkbox-inner]="apesSelectMode"></span>
    </span>
  </ng-container>
  <ng-container *ngIf="!apesTreeTemplate">
    <span
      title="{{apesTreeNode.title}}"
      [attr.draggable]="canDraggable"
      [attr.aria-grabbed]="canDraggable"
      [ngClass]="apesNodeContentClass"
      [class.draggable]="canDraggable">
      <span
        *ngIf="apesTreeNode.icon && apesShowIcon"
        [class.apes-tree-icon__open]="isSwitcherOpen"
        [class.apes-tree-icon__close]="isSwitcherClose"
        [class.apes-tree-icon_loading]="apesTreeNode.isLoading"
        [ngClass]="apesNodeContentLoadingClass">
        <span
          [ngClass]="apesNodeContentIconClass">
          <i apes-icon *ngIf="apesIcon" [type]="apesIcon"></i>
        </span>
      </span>
      <span class="apes-tree-title">
        <ng-container *ngIf="apesTreeNode.isMatched">
          <span>
            {{highlightKeys[0]}}<span class="font-highlight">{{apesSearchValue}}</span>{{highlightKeys[1]}}
          </span>
        </ng-container>
        <ng-container *ngIf="!apesTreeNode.isMatched">
          {{apesTreeNode.title}}
        </ng-container>
      </span>
    </span>
  </ng-container>
  <ng-template
    [ngTemplateOutlet]="apesTreeTemplate"
    [ngTemplateOutletContext]="{ $implicit: apesTreeNode }">
  </ng-template>

  <ul
    *ngIf="apesTreeNode.isExpanded"
    role="group"
    class="apes-tree-child-tree"
    [class.apes-tree-child-tree-open]="!apesSelectMode || apesTreeNode.isExpanded"
    data-expanded="true"
    [@.disabled]="noAnimation?.apesNoAnimation"
    @treeCollapseMotion>
    <apes-tree-node
      *ngFor="let node of apesTreeNode.getChildren()"
      [apesTreeNode]="node"
      [apesShowExpand]="apesShowExpand"
      [@.disabled]="noAnimation?.apesNoAnimation"
      [apesNoAnimation]="noAnimation?.apesNoAnimation"
      [apesSelectMode]="apesSelectMode"
      [apesShowLine]="apesShowLine"
      [apesExpandedIcon]="apesExpandedIcon"
      [apesDraggable]="apesDraggable"
      [apesCheckable]="apesCheckable"
      [apesAsyncData]="apesAsyncData"
      [apesExpandAll]="apesExpandAll"
      [apesShowIcon]="apesShowIcon"
      [apesSearchValue]="apesSearchValue"
      [apesHideUnMatched]="apesHideUnMatched"
      [apesBeforeDrop]="apesBeforeDrop"
      [apesTreeTemplate]="apesTreeTemplate">
    </apes-tree-node>
  </ul>
</li>
